<script setup lang="tsx">
import { watch } from 'vue';
import { NTag } from 'naive-ui';
import { $t } from '@/locales';
import { fetchXxlJobRegistryList } from '@/service/api';
import { useTable } from '@/hooks/common/table';
import { DICT_TYPE, getDictObj } from '@/utils/dict';

defineOptions({
  name: 'OnlineAddressModel'
});

interface Props {
  /** online地址列表 */
  executorId: number;
}

const props = defineProps<Props>();

const visible = defineModel<boolean>('visible', {
  default: false
});

const title = $t('page.base.xxl.executor.registryList');

const { columns, data, getDataByPage, searchParams } = useTable({
  apiFn: fetchXxlJobRegistryList,
  showTotal: true,
  immediate: false,
  apiParams: {
    id: props.executorId
  },
  columns: () => [
    {
      key: 'appname',
      title: $t('page.base.xxl.executor.appname'),
      align: 'center',
      width: 100
    },
    {
      key: 'address',
      title: $t('page.base.xxl.executor.registryList'),
      align: 'center',
      width: 100,
      render: row => {
        if (row.status === null) {
          return null;
        }
        const dictObj = getDictObj(DICT_TYPE.EXECUTOR_STATUS, row.status);

        return (
          <NTag type={dictObj?.colorType} bordered={false}>
            {row.address}
          </NTag>
        );
      }
    },
    {
      key: 'status',
      title: $t('page.base.xxl.executor.status'),
      align: 'center',
      width: 100,
      render: row => {
        if (row.status === null) {
          return null;
        }
        const dictObj = getDictObj(DICT_TYPE.EXECUTOR_STATUS, row.status);

        return <NTag type={dictObj?.colorType}>{dictObj?.label}</NTag>;
      }
    }
  ]
});

watch(visible, () => {
  if (visible.value) {
    handleInitModel();
  }
});

function handleInitModel() {
  searchParams.id = props.executorId;
  getDataByPage();
}
</script>

<template>
  <NModal v-model:show="visible" :title="title" preset="card" class="w-250">
    <NScrollbar class="h-100 pr-20px">
      <NDataTable :columns="columns" :data="data" :bordered="false" striped />
    </NScrollbar>
  </NModal>
</template>
